<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>订单详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../../css/main.css">
	<link rel="stylesheet" href="../../student/css/head.css">
	<link rel="stylesheet" href="../../css/window.css">
	<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
	<style scoped>
		[v-cloak] {
			display: none;
		}
		#order-detail-info{
			position: relative;
		}
		.bgImgBox{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.bgImgBox img{
			display: block;
			width: 100%;
			height: 100%;
		}
		.detail-info{
			padding: 50px;
			background-color: rgba(0, 0, 0, 0);
			position: absolute;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 2;
			width: calc(100% - 100px);
		}
		.detail-info>img{
			width: 100%;
		}
		.detail-info p{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 4px;
		}
		.detail-info p span:first-child{
			width: 68px;
			color: #333333;
			font-size: 15px;
			text-align: justify;
			text-align-last: justify; /* 确保最后一行也两端对齐 */
		}
		.detail-info p span:last-child{
			color: #3d3d3d;
			flex: 1;
			font-size: 15px;
			text-align: left;
		}
	</style>
</head>

<body>
	<div style="height: 40px;"></div>
	<div class="header">
		<div class="header_title">订单详情</div>
		<img src="../../image/return.png" alt="" class="return" onclick="history.back()">
	</div>
	<div id="order-detail-info" v-cloak style="text-align: center" :style="{ height: updateScreenSize+'px' }">
		<div class="detail-info" :style="{ height: updateScreenSonSize+'px' }">
			<img src="./img/litu.png" alt="" />
			<div style="padding: 30px 12px 12px 30px;">
				<p><span>学生姓名</span>：<span>{{userInfo.personName}}</span></p>
				<p><span>学生ID</span>：<span>{{userInfo.personId}}</span></p>
				<p><span>订单号</span>：<span>{{userInfo.tradeNo}}</span></p>
				<p><span>充值模式</span>：
					<span v-show="userInfo.rechargeMode == 1">包月充值</span>
					<span v-show="userInfo.rechargeMode == 0">单次充值</span>
				</p>
				<!-- <p><span>购买次数</span>：<span>10次</span></p> -->
				<p><span>支付金额</span>：<span style="color: #FD3838;">￥{{userInfo.fee}}</span></p>
				<p><span>支付状态</span>：<span>已支付</span></p>
				<p><span>创建时间</span>：<span>{{userInfo.time}}</span></p>
			</div>
		</div>
		<div class="bgImgBox">
			<img src="./img/bg.png" alt="">
		</div>
	</div>
	
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/zh-cn.min.js"></script>
	<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
		dayjs.locale('zh-cn');
		var agengtId=localStorage.getItem('agentId');
		var app = new Vue({
			el: '#order-detail-info',
			data: {
				updateScreenSize: 0,
				updateScreenSonSize: 0,
				orderId: params().id,
				userInfo: {},
			},
			created: function () {
				this.updateScreenSize = window.innerHeight - 60;
				this.updateScreenSonSize = window.innerHeight - 160;
				this.getData()
			},
			
			methods: {
				getData: function () {
				    axios.get('/s/order/getMeal/'+this.orderId).then(function (response) {
						let info = response.data;
						this.userInfo = response.data;
						console.log('info....',info)
					}.bind(this))
					.catch(function (error) {
						console.error('Error fetching attendance records:', error);
					});
				},
			},
			computed: {
				
			}
		});

	</script>
</body>

</html>